<!--html代码-->
<template>
  <div>
    <!--客户搜索-->
    <div style=" border: #DFDFDF solid 1px ;margin:auto; padding:20px;">
      <el-form :model="filters"
        style="background-color: #FFFFFF;border: #DFDFDF solid 1px ;margin:auto; padding: 20px; text-align: center;">
        <el-row :gutter="20">
          <el-col :span="7">
            <el-form-item label="用户id">
              <el-input v-model="filters.id" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="用户账号">
              <el-input v-model="filters.account" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="姓名">
              <el-input v-model="filters.name" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="7">
            <el-form-item label="联系电话">
              <el-input v-model="filters.phone" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="状态">
              <el-input v-model="filters.status" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-button type="primary" @click="query">搜索</el-button>
            <el-button type="primary" @click="cls">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div style="text-align: right">
      <el-button type="primary" @click="add">添加</el-button>
    </div>
    <el-table :data="tableData" stripe border style="width: 100%">
      <el-table-column type="index" label="行号" width="80" header-align="center" align="center" />
      <el-table-column prop="name" label="用户姓名" width="100" header-align="center" align="center" />
      <el-table-column prop="account" label="身份证号" width="180" header-align="center" align="center" />
      <el-table-column prop="phone" label="联系方式" width="120" header-align="center" align="center" />
      <el-table-column prop="sex" label="性别" width="80" header-align="center" align="center" />
      <el-table-column prop="age" label="年龄" width="80" header-align="center" align="center" />
      <el-table-column prop="status" label="状态" width="80" header-align="center" align="center"
        :formatter="statusOption" />
      <el-table-column prop="time" label="上网时长" width="80" header-align="center" align="center" />
      <el-table-column prop="blance" label="余额" width="80" header-align="center" align="center" />
      <el-table-column prop="createTime" label="创建时间" width="180" header-align="center" align="center" />
      <el-table-column prop="updateTime" label="更新时间" width="180" header-align="center" align="center" />
      <el-table-column prop="pcid" label="上机编号" width="100" header-align="center" align="center" />
      <el-table-column prop="primary" label="操作" align="center">
        <template v-slot="{ row }">
          <el-button type="primary" :icon="Edit" circle title="编辑"></el-button>
          <el-button type="primary" @click="up(row.id)">激活</el-button>
          <el-button type="primary" @click="down(row.id)">下机</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="
        background-color: #fff;
        height: 50px;
        line-height: 50px;
        text-align: right;
      ">
      <el-pagination background :page-size="pageSize" layout="total,sizes,prev, pager, next,jumper" :total="total"
        @size-change="chgsize" @current-change="chgpg" :page-sizes="[2, 5, 10, 20]" />
    </div>
  </div>

</template>

<!--js代码-->
<script setup>
import { ref, onMounted } from 'vue'
//引入图标
import { Edit } from '@element-plus/icons-vue'
//引入api
import { queryCustomer, active, deactivate } from '@/api/customer'

//声明分页条件
const page = ref(1)
const pageSize = ref(10)
const total = ref(0)
//声明列表
const tableData = ref([])
//过滤条件
const filters = ref({
  "account": "",
  "id": "",
  "name": "",
  "phone": "",
  "status": ""
})
async function up(id) {
  try {
    let res = await active(id);
    if (res.code === 200) {
      // 激活成功，重新加载数据
      initData();
      console.log('激活成功');
    } else {
      console.error('激活失败:', res.message);
    }
  } catch (error) {
    console.error('激活请求出错:', error);
  }
}

async function down(id) {
  try {
    let res = await deactivate(id);
    if (res.code === 200) {
      // 下机成功，重新加载数据
      initData();
      console.log('下机成功');
    } else {
      console.error('下机失败:', res.message);
    }
  } catch (error) {
    console.error('下机请求出错:', error);
  }
}
//搜索
function query() {
  initData()
}
//重置
function cls() {
  filters.value = {
    "account": "",
    "id": "",
    "name": "",
    "phone": "",
    "status": ""
  }
}
//将状态转换成文字
function statusOption(row) {
  if (row.status == 0) {
    return '激活'
  } else {
    return '未激活'
  }
}
//查询数据
async function initData() {
  //请求
  let data = {
    page: page.value,
    pageSize: pageSize.value,
    account: filters.value.account,
    id: filters.value.id,
    name: filters.value.name,
    phone: filters.value.phone,
    status: filters.value.status
  };
  let res = await queryCustomer(data)
  if (res.code == 200) {
    tableData.value = res.data.data
    page.value = res.data.page
    pageSize.value = res.data.pageSize
    total.value = res.data.total
  }
}



//声明周期钩子
onMounted(() => {
  initData()
})


</script>

<!--css代码-->
<style scoped></style>